<template>
  <div class="element-panel">
    <div class="search-box">
      <el-input v-model="searchText" placeholder="搜索" size="small"></el-input>
      <div class="search-icon">
        <i class="el-icon-search"></i>
      </div>
    </div>
    <div class="divider"></div>
    <div class="content">
      <div class="shape-list">
        <div v-for="(shape, index) in componentShapesList" :key="index" class="shape-item" draggable="true"
          @mousedown="handleMousedown(shape.type)">
          <div class="shape-preview">
            <i class="iconfont" :class="shape.icon"></i>
          </div>
          <div class="shape-name">{{ shape.name }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { componentShapesList } from '../utils/consts.js'

export default {
  name: 'ElementPanel',
  data() {
    return {
      searchText: '',
      componentShapesList: componentShapesList,
      previewStages: {},
      state: {
        type: ""
      }
    };
  },
  methods: {
    handleMousedown(type) {
      this.state.type = type
    }
  }

};
</script>

<style lang="scss" scoped>
.element-panel {
  padding: 20px 15px;

  .search-box {
    position: relative;
    width: 100%;
    margin-bottom: 15px;

    :deep(.el-input) {
      width: 100%;

      .el-input__inner {
        height: 32px;
        line-height: 32px;
        border-radius: 4px;
        padding-left: 12px;
        padding-right: 40px;
        font-size: 14px;
      }
    }

    .search-icon {
      position: absolute;
      right: 12px;
      top: 50%;
      transform: translateY(-50%);
      display: flex;
      align-items: center;
      justify-content: center;
      width: 16px;
      height: 16px;
      cursor: pointer;

      i {
        font-size: 14px;
        color: #909399;
      }

      &:hover {
        i {
          color: #409eff;
        }
      }
    }
  }

  .divider {
    width: 100%;
    height: 1px;
    background-color: #dcdfe6;
    margin-bottom: 15px;
  }

  .content {
    .shape-list {
      display: flex;
      flex-wrap: wrap;
      // display: grid;
      // grid-template-columns: repeat(3, 1fr);
      // gap: 15px;

      .shape-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 5px;
        // border: 1px solid #dcdfe6;
        // border-radius: 4px;
        cursor: pointer;
        transition: all 0.3s;

        &:hover {
          border-color: #409eff;
          background-color: #ecf5ff;

          .shape-name {
            color: #409eff;
          }
        }

        .shape-preview {
          width: 60px;
          height: 60px;
          margin-bottom: 8px;
          display: flex;
          align-items: center;
          justify-content: center;

          .preview-canvas {
            width: 60px;
            height: 60px;
          }
        }

        .shape-name {
          font-size: 12px;
          color: #606266;
        }
      }
    }
  }
}
</style>